<template>
    <template v-if="currentUser.role">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" show-overflow-tooltip />
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="job" label="工作" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="avatar" label="头像" show-overflow-tooltip />
            <el-table-column prop="role" label="角色" />

            <el-table-column width="250px">
                <template #default="scope">
                    <!-- 写在组件里的template是插槽 scope.row可以获取一行数据 -->
                    <el-button type="primary" plain :icon="Edit" @click="ShowFormDialog(scope.row)">修改</el-button>
                    <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button type="danger" :icon="DeleteFilled">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @update:current-page="updateCurrentPage" @update:page-size="updatePageSize"
            layout="sizes, prev, pager, next, jumper" :page-size="pageSize" :page-count="pageCount"
            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :hide-on-single-page="false" />

        <el-dialog v-model="dialogVisble" title="修改信息" draggable="true">
            <el-form :model="form">
                <el-form-item label="用户ID">
                    <el-input v-model="form.id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.gender" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="工作">
                    <el-input v-model="form.job" autocomplete="off" />
                </el-form-item>
                <el-form-item label="头像">
                    <el-input v-model="form.avatar" autocomplete="off" />
                </el-form-item>
                <el-form-item label="角色" >
                    <el-input v-model="form.role" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisble = false">取消</el-button>
                    <el-button type="primary" @click="submitModify()">
                        修改
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </template>

    <template v-else>
        <el-empty description="" />
    </template>




</template>
  
<script lang="ts" setup>
import type { UserType } from '@/types';
import { ref, reactive, onMounted } from 'vue'
import { getUserListPage, modifyInfo, deleteUser } from '@/api/index'
import { DeleteFilled, Edit } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import currentUserStore from '@/stores/currentUserStore'

const tableData = ref<UserType[]>([])

const currentUser = currentUserStore().currentUser
const pageSize = ref(10)
const pageCount = ref(1)
const currentPage = ref(1)
//获取到当前页面的改动，使之成为新值
const updateCurrentPage = (val: number) => {
    currentPage.value = val
    getList()
}
//获取到当前页面大小的改动，使之成为新值
const updatePageSize = (val: number) => {
    pageSize.value = val
    getList()
}
//对话框可见性
const dialogVisble = ref(false)
//form表单是一个usertype的user
const form = ref<UserType>({})

//修改用户
const ShowFormDialog = (user: UserType) => {
    dialogVisble.value = true
    //唤出对话框
    form.value = { ...user }
    //user变成非响应式数据
}
//提交修改
const submitModify = () => {
    modifyInfo(form.value).then(((res: any) => {
        if (res.code == 200) {
            ElMessage.success("修改成功")
            dialogVisble.value = false
            getList()
        }
    }))
}

const handleDelete = (user: UserType) => {
    deleteUser(user.id!).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success(res.msg)
            getList()
        }
    })
}
const getList = () => {
    //获取用户列表
    getUserListPage(currentPage.value, pageSize.value).then(((res: any) => {
        if (res.code == 200) {
            tableData.value = res.data.records
            pageCount.value = res.data.pages
            console.log(res)
        }
    }))
}
onMounted(() => {
    getList()
})
</script>
  